@(resType: String, status: String, topNews: List[Resource], news: List[Resource], activeUsers: List[User], topViewResources: List[Resource], boards: List[Board], page: Int, total: Int)(implicit request: RequestHeader)
@import helper._
@import utils.RequestHelper

@main(s"${app.Global.siteSetting.indexTitle}", "community", "index") {
@nav(resType)
<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
      @if(topNews.nonEmpty){
      <div class="fly-panel">
        <div class="fly-panel-title fly-filter">
          <a>置顶</a>
          <a href="#signin" class="layui-hide-sm layui-show-xs-block fly-right" id="LAY_goSignin" style="color: #FF5722;">去签到</a>
        </div>
        <ul class="fly-list">
          @for(r <- topNews){
          <li>
            <a href="/user/home?uid=@{r.author._id}" class="fly-avatar">
              <img src="@r.author.headImg" alt="@r.author.name">
            </a>
            <h2>
              <a class="layui-badge">@utils.AppUtil.prettyResource(r.resType)</a>
              <a href="/@{r.resType}/view?_id=@r._id">
                  @{r.doc.map(t => t.title + " - ").getOrElse("")}@{r.title}
              </a>
            </h2>
            <div class="fly-list-info">
              <span>@utils.DateTimeUtil.toPrettyString(r.createTime)</span>
              @if(r.closed){
              <span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
              }
              <span class="fly-list-nums">
                <i class="iconfont icon-pinglun1" title="回答"></i> @r.replyStat.replies.size
                <i class="iconfont" title="人气">&#xe60b;</i> @r.viewStat.count
              </span>
            </div>
            <div class="fly-list-badge">
              @if(r.top){
              <span class="layui-badge layui-bg-black">置顶</span>
              }
              @if(r.recommended){
              <span class="layui-badge layui-bg-red">精帖</span>
              }
            </div>
          </li>
          }
        </ul>
      </div>
      }

      <div class="fly-panel" style="margin-bottom: 0;">
        <div class="fly-panel-title fly-filter">
          <a href="/" @if(status == "0"){class="layui-this"}>所有</a>
          <span class="fly-mid"></span>
          <a @if(status == "1"){class="layui-this"} href="/?status=1">未结</a>
          <span class="fly-mid"></span>
          <a @if(status == "2"){class="layui-this"} href="/?status=2">已结</a>
          <span class="fly-mid"></span>
          <a @if(status == "3"){class="layui-this"} href="/?status=3">精华</a>
        </div>

        <ul class="fly-list">
          @for(r <- news){
          <li>
            <a href="/user/home?uid=@{r.author._id}" class="fly-avatar">
              <img src="@r.author.headImg">
            </a>
            <h2>
              <a class="layui-badge">@utils.AppUtil.prettyResource(r.resType)</a>
              <a href="/@{r.resType}/view?_id=@r._id">
                  @{r.doc.map(t => t.title + " - ").getOrElse("")}@{r.title}
              </a>
            </h2>
            <div class="fly-list-info">
              <span title="创建时间">@utils.DateTimeUtil.toPrettyString(r.createTime)</span>
              <a href="/?status=@{status}&category=@{r.categoryPath}" link>@r.categoryName</a>
              @if(r.closed){
              <span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
              }
              <span class="fly-list-nums">
                <i class="iconfont icon-pinglun1" title="回答"></i> @r.replyStat.replies.size
                <i class="iconfont" title="人气">&#xe60b;</i> @r.viewStat.count
              </span>
            </div>
            <div class="fly-list-badge">
              @if(r.top){
              <span class="layui-badge layui-bg-black">置顶</span>
              }
              @if(r.recommended){
              <span class="layui-badge layui-bg-red">精帖</span>
              }
            </div>
          </li>
          }
        </ul>
          <div style="text-align: center">
          <div class="laypage-main">
            <a href="/?status=@{status}&resType=@{resType}&page=@{page-1}" class="laypage-prev">上一页</a><span>@{if(news.isEmpty && total == 0){0}else{page}}/@{math.ceil(total/15.0).toInt}</span><a href="/?status=@{status}&resType=@{resType}&page=@{page+1}" class="laypage-next">下一页</a></div>
          
          </div>

      </div>
    </div>
    <div class="layui-col-md4">
      <!-- 开始社区版块 -->
      <div class="fly-panel fly-board fly-rank-reply">
        <h3 class="fly-panel-title">社区版块</h3>
        <dl>
          @for(board <- boards){
          <dd>
            <a href="/boards?path=@board.path">
              <img src="@board.avatarUrl" width="50" height="50">
              <i>@board.name</i>
            </a>
          </dd>
          }
          <dd>
            <a href="/board/all">
              <img src="/assets/images/board/more.png" width="50" height="50">
              <i>更多版块</i>
            </a>
          </dd>
        </dl>
      </div>
      <!-- 结束社区版块 -->

      <div class="fly-panel">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-top: 0px;">
          <ul class="layui-tab-title fly-panel-title">
            <li class="layui-this">最新说说</li>
            <li>热门说说</li>
          </ul>
          <div id="app" class="layui-tab-content" style="padding-left: 0px; padding-right: 0px;">
            <div class="layui-tab-item layui-show">
              <ul class="fly-panel fly-list">
                <template v-for="(t, index) in tweets">
                  <li style="padding: 3px 10px 2px 50px; height: auto; border: 0px;">
                    <a :href="'/user/home?uid=' + t.author._id" class="fly-avatar" style="top: 0px;">
                      <img :src="t.author.headImg" alt="" style="width:30px;height:30px;">
                    </a>
                    <span><a :href="'/user/home?uid=' + t.author._id">{{ t.author.name }}：</a> {{ t.content }}</span>
                    <div class="fly-list-info">
                      <a :href="'/tweet/view?_id=' + t._id" link>
                        <cite>查看</cite>
                      </a>
                      <span>{{ t.time }}</span>
                      <span class="fly-list-nums">
                        <i class="iconfont icon-pinglun1" title="回答"></i> {{ t.replyCount }}
                        <i class="iconfont icon-zan zan-resource" style="cursor: pointer;" title="点赞" :data-id="t._id"  data-type="tweet" data-title="说说"></i> {{ t.voteCount }}
                      </span>
                    </div>
                  </li>
                </template>
              </ul>
            </div>
            <div class="layui-tab-item">
              <ul class="fly-panel fly-list">
                <template v-for="(t, index) in hotTweets">
                  <li style="padding: 3px 10px 2px 50px; height: auto; border: 0px;">
                    <a :href="'/user/home?uid=' + t.author._id" class="fly-avatar" style="top: 0px;">
                      <img :src="t.author.headImg" alt="" style="width:30px;height:30px;">
                    </a>
                    <span><a :href="'/user/home?uid=' + t.author._id">{{ t.author.name }}：</a> {{ t.content }}</span>
                    <div class="fly-list-info">
                      <a :href="'/tweet/view?_id=' + t._id" link>
                        <cite>查看</cite>
                      </a>
                      <span>{{ t.time }}</span>
                      <span class="fly-list-nums">
                        <i class="iconfont icon-pinglun1" title="回答"></i> {{ t.replyCount }}
                        <i class="iconfont icon-zan zan-resource" style="cursor: pointer;" title="点赞" :data-id="t._id"  data-type="tweet" data-title="说说"></i> {{ t.voteCount }}
                      </span>
                    </div>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="jie-add">
        <form id="tweet-form" class="layui-form">
          <div class="layui-form-item layui-form-text" style="margin-bottom: 0px;">
            <div class="layui-input-block" style="margin-left: 0px;">
              <textarea id="tweet" placeholder="发表说说" class="layui-textarea" rows="2" style="min-height:20px;"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px;">
              <button class="layui-btn layui-btn-small" style="width: 100%; font-size: 15px;">发表说说</button>
            </div>
          </div>
        </form>
      </div>

      <div class="fly-panel fly-rank fly-rank-reply">
        <h3 class="fly-panel-title">在线阅读</h3>
        <dl>
          <!--<i class="layui-icon fly-loading">&#xe63d;</i>-->
          <dd style="width:130px;height:180px;">
            <a href="/book/p-i-s-3/index.html">
              <img src="/resource/acd7825c-dd17-4e2a-80f2-ac744d0530f7" style="width:130px;height:180px;"><cite>2016.04</cite><i title="Programming in Scala 3rd">Programming in Scala 3rd</i>
            </a>
          </dd>
          <dd style="width:130px;height:180px;">
            <a href="/book/scala-in-depth/index.html">
              <img src="/resource/8ec9b6ac-a77a-494e-9a05-a2ae08e8dc14" style="width:130px;height:180px;"><cite>2012.05</cite><i>Scala In Depth</i>
            </a>
          </dd>
        </dl>
      </div>

      <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">热门文档</dt>
        @for(a <- topViewResources){
        <dd>
          <a href="/doc/view?_id=@{a._id}">@a.title</a>
          <span><i class="iconfont icon-pinglun1"></i> @a.viewStat.count</span>
        </dd>
        }
      </dl>

      <div class="fly-panel">
        <h3 class="fly-panel-title">友情链接</h3>
        <ul class="fly-panel-main fly-list-static">
          @for(l <- app.Global.siteSetting.links) {
            <li>
              <a href="@l.url" target="@l.target">@l.title</a>
            </li>
          }
        </ul>
      </div>

    </div>
  </div>
</div>
}

<script src="/assets/js/socket.io.js"></script>
<script src="/assets/js/vue.js"></script>
<script>
layui.cache.page = 'index';

var app = new Vue({
  el: '#app',
  data: { tweets: [], hotTweets: [] }
});

var socket = io("/tweet");
socket.on('chat message', function(tweet) {
    app.tweets.unshift(JSON.parse(tweet));
});

$('#tweet-form').submit(function(){
  var tweet = $('#tweet').val();
  if($.trim(tweet) == ""){ return false; }
  $.ajax({
    type: 'post',
    dataType: 'json',
    data: {content: tweet, images: []},
    url: '/tweet/add',
    success: function(res){
      if(res.status === 0) {
        $('#tweet').val('');
        socket.emit('chat message', JSON.stringify(res.tweet));
      } else {
        layer.msg(res.msg||res.code);
      }
    }, error: function(e){
      layer.msg('请求异常，请重试');
    }
  });
  return false;
});

$(function () {
 $.ajax({
    type: 'get',
    dataType: 'json',
    url: '/tweet/json?count=5',
    success: function(res){
      if(res.status === 0) {
        app.tweets = res.tweets;
        app.hotTweets = res.hotTweets;
      } else {
        layer.msg(res.msg||res.code);
      }
    }
  });
});

$(document).on('click', 'i.zan-resource', function(){
  var othis = $(this), resId = othis.attr('data-id'), resType = othis.attr('data-type'), resTitle = othis.attr('data-title');
  layui.fly.json('/resource/vote', {
    resId: resId
    ,resType: resType
    ,resTitle: resTitle
  }, function(res){
    for(i in app.tweets){
      if(app.tweets[i]._id == resId){
        app.tweets[i].voteCount += res.count;
      }
    }
    for(i in app.hotTweets){
      if(app.hotTweets[i]._id == resId){
        app.hotTweets[i].voteCount += res.count;
      }
    }
  });
});
</script>
